<template>
  <div class="base-info">
    <div class="model">
      <HeaderTip label="申请信息"></HeaderTip>
      <el-form ref="apply-form-info" :model="info" class="size-auto width-100 form" size="medium" label-width="130px">
        <el-form-item label="申请时间：">
          {{ info.applicationTime }}
        </el-form-item>
        <el-form-item label="申请单位：">
          {{ info.constructionUnitName }}
        </el-form-item>
        <el-form-item label="项目名称：">
          {{ info.projectName }}
        </el-form-item>
        <el-form-item label="所属公路：">
          {{ info.highwayName }}
        </el-form-item>
        <el-form-item label="养护范围：">
          <span>
              {{ info.highwayName }}
          </span>
          <span v-if="info.roadSection">-{{ info.roadSection }}</span>
          <span v-if="info.stakeNoRange">-{{ info.stakeNoRange }}</span>
        </el-form-item>
        <el-form-item label="计量期数：">
          {{ info.periodNumber }}
        </el-form-item>
        <el-form-item label="计量期数：">
          {{ info.cycleStartDate }}~{{ info.cycleEndDate }}
        </el-form-item>
        <el-form-item label="其他说明：" prop="applicationInstructions">
         {{ info.applicationInstructions }}
        </el-form-item>

        <el-form-item label="附件资料：" prop="attachment">
          <FileListPreview :files="info.attachment"></FileListPreview>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="info.operationRecordList && info.operationRecordList.length" class="model">
      <HeaderTip label="计量动态"></HeaderTip>
      <el-steps direction="vertical"  :active="info.operationRecordList.length + 1">
        <el-step v-for="(item,index) in info.operationRecordList " :key="index" icon="el-icon-time" :title="item.operateTime">
          <div slot="description" class="step-item">
            <div class="title">
              <div class="pic"><i class="el-icon-user-solid"></i></div>
              <div class="username">{{ item.operatorName }}</div>
              <div class="depart"> {{ item.operatorOrgName }}</div>
              <el-image v-if="item.operatorSignature" style="width: 80px; height: 40px" :src="item.operatorSignature"></el-image>
            </div>
            <div class="dec">{{ item.operationDescription }}</div>
            <div v-if="item.type !== 1" class="oppion">审批意见： {{ item.operationOpinion }}</div>
          </div>
        </el-step>
      </el-steps>
    </div>
    
  </div>
</template>
<script>
import FileListPreview from '@/components/FileListPreview'
export default {
    components: {
        FileListPreview
    },
   
    props: {
        info: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
      
        }
    },
    
}
</script>
<style scoped lang="scss">
.model{
  margin-bottom: 36px;
}
.step-item{
  padding: 16px;
  background-color:rgba(4, 97, 255, 0.1) ;
  border: 1px solid rgba(4, 97, 255, 0.2);
  border-radius: 4px;
  color: #222;
  width: 600px !important;
  .title{
    display: flex;
    display: flex;
    align-items: center;
    .pic{
      height: 26px;
      width: 26px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background: #818181;
      margin-right: 8px;
      font-size: 20px;
    }
    .username,.depart{
      margin-right: 8px;
    }
  }
  .dec{
    margin: 9px 0px;
  }
}

</style>
